---
type: tutorial
title: 첫 번째 Astro 페이지 만들기
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 페이지 사이에 탐색 링크가 있는 새 페이지를 사이트에 추가하세요.
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 `.astro` 파일이 웹 사이트의 페이지를 담당한다는 것을 알았으므로 파일을 만들 차례입니다!

<PreCheck>
  - 웹사이트에 두 개의 새 페이지 (정보 및 블로그)를 만듭니다.
  - 페이지에 탐색 링크를 추가합니다.
  - 업데이트된 버전의 웹사이트를 웹에 배포합니다.
</PreCheck>

## 새로운 `.astro` 파일 생성

<Steps>
1. 코드 편집기의 파일 창에서 기존 파일 `index.astro`가 있는 `src/pages/` 폴더로 이동합니다.

2. 동일한 폴더에 `about.astro`라는 새 파일을 만듭니다.

3. `index.astro`의 내용을 새 `about.astro` 파일에 복사하거나 다시 입력하세요.

    :::tip
    편집기에서는 이 파일의 탭 레이블에 흰색의 단색 원이 표시될 수 있습니다. 이는 파일이 아직 저장되지 않았음을 의미합니다. VS Code의 파일 메뉴에서 "Auto Save"를 활성화하면 더 이상 파일을 수동으로 저장할 필요가 없습니다.
    :::

4. 주소 표시줄의 웹사이트 미리보기 URL 끝에 `/about`을 추가하고 페이지 로드가 보이는지 확인하세요. (예: `http://localhost:4321/about`)
</Steps>

지금은 "About" 페이지가 첫 번째 페이지와 정확히 동일하게 표시되어야 하지만 이를 변경할 예정입니다!

## 페이지 편집

여러분에 관한 페이지를 만들려면 HTML 콘텐츠를 편집하세요.

정보 페이지에 더 많은 콘텐츠를 변경하거나 추가하려면 콘텐츠가 포함된 HTML 요소 태그를 더 추가하세요. 기존 `<body></body>` 태그 사이에 아래 HTML 코드를 복사하여 붙여넣거나 직접 만들 수 있습니다.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>

  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>

  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>
```

이제 브라우저 탭의 `/about` 페이지를 다시 방문하면 업데이트된 콘텐츠를 볼 수 있습니다.

## 탐색 링크 추가

모든 페이지를 더 쉽게 미리 보려면 두 페이지 (`index.astro` 및 `about.astro`) 상단의 `<h1>` 앞에 HTML 페이지 탐색 링크를 추가하세요.

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Home</a>
<a href="/about/">About</a>

<h1>About Me</h1>
<h2>... and my new Astro site!</h2>
```

이 링크를 클릭하여 사이트의 페이지 간 앞뒤로 이동할 수 있는지 확인하세요.

:::note
많은 프레임워크와 달리 Astro는 표준 HTML `<a>` 요소를 사용하여 전통적인 페이지 새로 고침을 통해 페이지 (_routes_ 라고도 함) 간을 탐색합니다.
:::

<Box icon="puzzle-piece">
## 직접 시도해 보기 - 블로그 페이지 추가

[위와 동일한 단계](#새로운-astro-파일-생성)에 따라 세 번째 페이지인 `blog.astro`를 사이트에 추가하세요.

(모든 페이지에 세 번째 탐색 링크를 추가하는 것을 잊지 마세요.)

<details>
<summary>단계 표시</summary>
<Steps>
1. `src/pages/blog.astro`에 새 파일을 만듭니다.
2. `index.astro`의 전체 내용을 복사하여 `blog.astro`에 붙여넣습니다.
3. 모든 페이지 상단에 [세 번째 탐색 링크를 추가](#탐색-링크-추가)하세요.
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
</body>
```
</details>
</Box>

이제 서로 연결되는 세 개의 페이지가 있는 웹사이트가 생겼을 것입니다. 이제 블로그 페이지에 일부 콘텐츠를 추가할 차례입니다.

`blog.astro`의 페이지 콘텐츠를 다음과 같이 업데이트하세요.

```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning Astro.</p>
</body>
```

브라우저 미리보기에서 세 페이지를 모두 방문하여 전체 사이트를 미리보고 다음 사항을 확인하세요.
- 모든 페이지는 세 페이지 모두에 올바르게 연결됩니다.
- 두 개의 새 페이지에는 각각 고유한 제목이 있습니다.
- 두 개의 새 페이지에는 각각 고유한 단락 텍스트가 있습니다.

## 변경사항을 웹에 게시

1단계의 설정을 따랐다면 Netlify를 통해 라이브 웹사이트에 변경 사항을 게시할 수 있습니다.

미리 보기 모양이 만족스러우면 GitHub의 온라인 저장소에 변경 사항을 **커밋**하세요.

<Steps>
1. VS Code에서 GitHub에 대한 마지막 커밋 이후 변경된 파일을 미리 봅니다.

    - 왼쪽 메뉴의 **Source Control 탭**으로 이동합니다. 작은 "3"이 표시되어야 합니다.

    - `index.astro`, `about.astro`, `blog.astro`가 변경된 파일로 나열되어 있는 것을 볼 수 있습니다.

2. 텍스트 상자에 커밋 메시지 (예: "두 개의 새 페이지 추가 - 정보 및 블로그")를 입력하고 <kbd>Ctrl + Enter</kbd> (macOS: <kbd>Cmd ⌘ + Enter</kbd>)를 눌러 변경 사항을 현재 작업 공간에 커밋합니다.

3. GitHub의 <kbd>Sync Changes</kbd> 버튼을 클릭하세요.

4. 몇 분 정도 기다린 후 Netlify URL을 방문하여 변경 사항이 실시간으로 게시되었는지 확인하세요.
</Steps>

:::tip[정기적으로 커밋 및 배포]
작업을 일시 중지할 때마다 다음 단계를 따르세요! 변경 사항은 GitHub 저장소에 업데이트됩니다. Netlify 웹사이트에 배포한 경우 재빌드되어 다시 게시됩니다.
:::

<Box icon="check-list">

## 체크리스트

<Checklist>
- [ ] 내 웹사이트에 대한 새 페이지를 만들고 기존 페이지에서 해당 페이지에 연결할 수 있습니다.
- [ ] 변경 사항을 GitHub에 다시 커밋하고 Netlify에서 라이브 사이트를 업데이트할 수 있습니다.
</Checklist>
</Box>

### 추가 자료

- [Astro의 파일 기반 라우팅](/ko/basics/astro-pages/#파일-기반-라우팅)
- [Astro 페이지 HTML](/ko/basics/astro-pages/#astro-페이지)
